<template>
  <BaseLayout>
    <template #content>
      <div class="search-block">
        <el-form
          :inline="true"
          :model="queryParams"
        >
          <el-row :gutter="20">
            <el-col :span="3">
              <el-input
                v-model="queryParams.username"
                placeholder="用户帐号"
                :suffix-icon="queryParams.username ? '' : Search"
                clearable
                size="large"
              />
            </el-col>

            <el-col :span="3">
              <el-input
                v-model="queryParams.userIp"
                placeholder="用户 IP"
                :suffix-icon="queryParams.userIp ? '' : Search"
                clearable
                size="large"
              />
            </el-col>

            <el-col :span="3">
              <el-select
                v-model="queryParams.logType"
                placeholder="日志类型"
                clearable
                size="large"
              >
                <el-option
                  v-for="item in logTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>

            <el-col :span="4">
              <el-select
                v-model="queryParams.result"
                placeholder="登录结果"
                clearable
                size="large"
              >
                <el-option
                  v-for="item in loginLogResultOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>

            <el-col :span="8">
              <el-date-picker
                v-model="queryParams.createTime"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="large"
              />
            </el-col>

            <el-col :span="2">
              <el-button
                type="primary"
                size="large"
                @click="getTableData"
              >
                搜索
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <el-table
        border
        v-loading="tableLoading"
        :data="tableData"
        :stripe="true"
        :header-cell-style="() => ({ background: '#F8F8F8' })"
      >
        <el-table-column
          prop="id"
          label="日志编号"
          min-width="150"
          align="center"
        />

        <el-table-column
          label="日志类型"
          min-width="150"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.logType ? formatLogType(scope.row.logType) : '' }}
          </template>
        </el-table-column>

        <el-table-column
          prop="username"
          label="用户帐号"
          min-width="150"
          align="center"
        />

        <el-table-column
          prop="userIp"
          label="用户 IP"
          min-width="150"
          align="center"
        />

        <el-table-column
          label="结果"
          min-width="150"
          align="center"
        >
          <template #default="scope">
            <el-tag
              :type="scope.row.result === 0 ? 'success' : 'danger'"
              disable-transitions
            >
              {{
                scope.row.result || scope.row.result === 0
                  ? formatLogResult(scope.row.result)
                  : '暂无结果'
              }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="userAgent"
          label="浏览器信息"
          min-width="150"
          align="center"
        />

        <el-table-column
          prop="createTime"
          label="登录时间"
          min-width="150"
          align="center"
          :formatter="formatDate"
        />
      </el-table>
    </template>

    <template #footer>
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="handlePagination"
      />
    </template>
  </BaseLayout>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { defaultPage, defaultPageSize } from '@/types/api.d'
import { getSystemLoginLogPage } from '@/api/loginLog'
import dayjs from 'dayjs'
import { logTypeOptions, loginLogResultOptions } from '@/utils/globalOptions'
import BaseLayout from '@/layout/baseLayout/index.vue'
import { Search } from '@element-plus/icons-vue'

/**
 * 表格属性
 */
const tableData = ref([])
const tableLoading = ref(true)

/**
 * 分页器属性
 */
const total = ref(0)

const queryParams = reactive({
  username: '', // 用户帐号
  userIp: '', // 用户 IP
  result: '', // 登录结果
  logType: '', // 日志类型
  createTime: [], // 登录时间
  pageNo: defaultPage, // 当前页码
  pageSize: defaultPageSize // 每页显示数量
})

onMounted(async () => {
  await getTableData()
})

/**
 * 获取表格数据
 */
const getTableData = async () => {
  tableLoading.value = true
  const res = await getSystemLoginLogPage(queryParams)

  if (res) {
    tableData.value = res.list
    total.value = res.total
  }

  tableLoading.value = false
}

/**
 * 分页事件
 */
const handlePagination = async ({ page, limit }: { page: number; limit: number }) => {
  queryParams.pageNo = page
  queryParams.pageSize = limit
  await getTableData()
}

/**
 * 日志类型格式化
 */
const formatLogType = (value: string | any) => {
  return logTypeOptions.find(item => item.value == value)?.label
}

/**
 * 日志结果格式化
 */
const formatLogResult = (value: string | any) => {
  return loginLogResultOptions.find(item => item.value == value)?.label
}

/**
 * 日期格式化
 */
const formatDate = (_row, _column, cellValue) => {
  if (!cellValue) {
    return '-'
  }

  return typeof cellValue === 'number' ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '-'
}
</script>

<style lang="scss" scoped>
.search-block {
  margin-bottom: 20px;
}
</style>
